<template>
  <div>
    <el-dialog @close="close('form')" title="修改计划" :close-on-click-modal="false" :show-close="false"
      :visible.sync="dialogStation" class="postionbot" center>
      <el-form status-icon ref="form" :model="form" label-width="120px" :rules="rules" class="demo-ruleForm">
        <el-form-item label="任务日期 :" prop="taskDate">
          <el-date-picker v-model.trim="form.taskDate" :picker-options="pickerOptions" value-format="yyyy-MM-dd"
            type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="选择项目 :" prop="projectId">
          <el-select v-model.trim="form.projectId" placeholder="请选择项目" @change="projectChange">
            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" placeholder="0">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="本周计划 :" prop="weekPlan" v-if="personalWeekPlan != undefined">
          <el-card class="box-card" style="width: 70%">
            {{ personalWeekPlan }}
          </el-card>
        </el-form-item>
        <el-form-item label="工作内容 :" prop="content">
          <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 5, maxRows: 10 }" placeholder="请输入内容">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogStation = false">取 消</el-button>
        <el-button type="primary" @click="save('form')" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selectUserProject, updateTask, getPlanByType } from "@/service/Api";
export default {
  name: "dialog_",
  data() {
    return {
      loading: false,
      dialogStation: false,
      pickerOptions: {
        //明日计划 和 修改任务 的时间选择器日期相关
        disabledDate(time) {
          return time.getTime() > Date.now() + 1000 * 60 * 60 * 24;
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      projectList: [],
      form: {
        taskDate: "",
        projectId: "",
        time: "",
        content: "",
        projectName: "",
      },
      rules: {
        taskDate: [
          { required: true, message: "请选择任务日期", trigger: "blur" },
        ],
        projectId: [{ required: true, message: "请选择项目", trigger: "blur" }],
        content: [
          { required: true, message: "请输入工作内容", trigger: "blur" },
        ],
      },
      personalWeekPlan: "",
    };
  },
  created() { },
  methods: {
    //监听新增对话框的关闭事件
    close(formName) {
      this.$refs[formName].resetFields();
    },
    showDialog(row = null) {
      this.dialogStation = true;
      if (row) {
        this.form = row;
        this.projects(row.projectId);
        this.getPlan(row.taskDate, row.projectId)
      }
    },

    getPlan(str, id) {
      let data = {
        dateStr: str,
        projectId: id
      }
      getPlanByType(data, 3).then(res => {
        if (res.code == 0) {
          this.personalWeekPlan = res.data.planStr
        }
      })
    },

    projects(id) {
      selectUserProject({ keyword: "" }).then((res) => {
        if (res.code == 0) {
          this.projectList = res.data;
          this.form.projectName = this.projectList.find(
            (item) => item.id === id
          ).name;
        }
      });
    },
    projectChange(val) {
      this.form.projectName = this.projectList.find(
        (item) => item.id === val
      ).name;
      this.getPlan(this.form.taskDate, val)
    },
    save(formName) {
      updateTask({
        id: this.form.id,
        taskDate: this.form.taskDate,
        projectId: this.form.projectId,
        content: this.form.content,
        type: "2",
        projectName: this.form.projectName,
      }).then((response) => {
        if (response.code === 0) {
          this.$message.success("修改成功");
          this.dialogStation = false;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
